<template>
	<view class="play flex-center">
		<view class="coverFilter" :style="{ backgroundImage: 'url(' + musicInfo.picUrl + ')' }"></view>
		<nav-bar leftImg="back" rightImg="share" backgroundColor="transparent">
			<view slot="title" class="title" v-show="musicInfo.name">
				<view>{{ musicInfo.name }}</view>
				<view class="flex-center">
					{{ musicInfo.authors }}
					<uni-icons color="#C0C0C0" type="arrowright"></uni-icons>
				</view>
			</view>
		</nav-bar>
		<view class="playCenter flex-center">
			<view class="discFront flex-center">
				<view class="discArea flex-center">
					<view class="needle" :class="{ needleplay: playStatus, needlepause: !playStatus }"></view>
					<view
						class="disc"
						:style="{ transform: 'rotate(' + coverDeg + 'deg)' }"
						@click="
							changeMusicInfo({ playStatus: !playStatus });
							playStatus ? play() : pause();
						"
					>
						<view class="cover" :style="{ backgroundImage: 'url(' + musicInfo.picUrl + ')' }"></view>
					</view>
				</view>
				<view class="menu1"></view>
			</view>
			<view class="lyricBack" v-if="showdisc"></view>
		</view>
		<view class="controlBar"><slider :value="percent" block-size="12" activeColor="#dadada" backgroundColor="#aaaaaa" @change="handlerSlider" /></view>
	</view>
</template>

<script>
import { mapMutations, mapGetters, mapActions } from 'vuex';
export default {
	data() {
		return {
			showdisc: true,
			cover_timer: null,
			coverDeg: 0
		};
	},
	watch: {
		playStatus: {
			handler(newV) {
				if (newV) {
					this.cover_timer = setInterval(() => {
						this.coverDeg += 0.25;
					}, 16);
				} else {
					clearInterval(this.cover_timer);
				}
			},
			immediate: true
		}
	},
	onLoad(e) {
		// #ifdef  APP-PLUS
		console.log(e);
		if (e.play == 'true') {
			let info_sto=  uni.getStorageSync('musicInfo')
			console.log(info_sto) 
			if(info_sto!='{}'){
				this.changeMusicInfo(info_sto)
				this.createBg()
				this.play()
			}
		}
		// #endif
	},
	computed: {
		...mapGetters(['duration', 'currentTime', 'playStatus', 'musicInfo', 'bgAudioMannager']),
		percent() {
			return (this.currentTime / this.duration) * 100;
		}
	},
	methods: {
		...mapMutations(['changeMusicInfo']),
		...mapActions(['play', 'pause', 'seek', 'createBg']),
		handlerSlider(e) {
			this.seek((e.detail.value / 100) * this.duration);
		}
	}
};
</script>

<style lang="scss">
/deep/.uni-navbar--border {
	border: none;
}
/deep/.uni-navbar__header-btns {
	width: 35px;
}
.play {
	background-color: #3f536e;
	height: 100vh;
	padding-top: calc(var(--status-bar-height) + 44px);
	box-sizing: border-box;
	position: relative;
	flex-direction: column;
	overflow: hidden;
	.controlBar {
		width: 100%;
		flex: 1;
	}
	.coverFilter {
		background-size: auto 180vh;
		background-position: 16% 16%;
		background-repeat: no-repeat;
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		filter: blur(36px);
		transform: scale(1.2);
		&:after {
			content: '';
			position: absolute;
			background-color: rgba(36, 35, 21, 0.3);
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
		}
	}
	.playCenter {
		// background-color: cyan;
		width: 100%;
		height: 80vh;
		flex-direction: column;
		justify-content: flex-start;
		.discFront {
			flex-direction: column;
			justify-content: space-between;
			.discArea {
				width: 750 * 0.72rpx;
				flex-direction: column;
				justify-content: space-between;
				.needle {
					width: 96 * 1.3px;
					height: 137 * 1.3px;
					background-image: url(../../static/play/needle-ip6.png);
					background-repeat: no-repeat;
					background-size: contain;
					z-index: 2;
					margin-left: 20%;
					transform-origin: 18px 18px;
				}
				.needleplay {
					transform: rotate(0);
					transition: all 0.2s linear;
				}
				.needlepause {
					transform: rotate(-25deg);
					transition: all 0.2s linear;
				}
				.disc {
					width: 100%;
					padding-top: 100%;
					background-image: url(../../static/play/disc-ip6.png);
					background-repeat: no-repeat;
					background-size: contain;
					margin-top: -120rpx;
					position: relative;
					.cover {
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
						width: 62%;
						padding-top: 62%;
						border-radius: 50%;
						background-repeat: no-repeat;
						background-size: contain;
					}
				}
			}
			.menu1 {
			}
		}
	}
	.title {
		margin-left: 12rpx;
	}
	.title > view {
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}
	.title > view:nth-child(1) {
		font-size: 16px;
	}
	.title > view:nth-child(2) {
		font-size: 12px;
		color: #c0c0c0;
		margin-top: 1px;
		justify-content: flex-start;
	}
}
</style>
